<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="../dist/w2ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../libs/font-awesome/css/font-awesome.css" />
<script type="text/javascript" src="../libs/jquery/jquery-3.5.1.min.js"></script>
<script type="module" src="../src/w2compat.js?globals"></script>
<style>
.some {
    background-color: blue !important;
}
</style>
<script>
//<![CDATA[
// $.noConflict();
jQuery(function () {
    // w2utils.locale('../src/locale/ru-ru').then(() => {
        jQuery('#grid').w2grid({
            name      : 'grid',
            header    : 'List of Names',
            // url : '//w2ui.com/web/pages/demo/infinite/index2.php',
            // routeData : { id: 4 },
            // url       : '/1/:id/grid.json',
            // url     : {
            //     get    : 'data.php',
            //     remove : 'grid3.json',
            //     save   : 'save'
            // },
            // columnTooltip: 'top',
            reorderRows: true,
            //reorderColumns: true,
            show: {
                toolbar: true,
                footer: true,
                header: true,
                emptyRecords: true,
                columnHeaders: true,
                searchAll: true,
                searchHiddenMsg: true,
                searchVisible: true,
                selectColumn: true,
                expandColumn: false,
                lineNumbers: true,
                toolbarColumns: true,
                toolbarAdd: true,
                toolbarEdit: false,
                toolbarDelete: true,
                toolbarSave: true
            },
            menu: [
                { id: 1, text: 'Select Item', icon: 'fa fa-star',
                    items: [
                        { id: 'item1', text: 'Select Item', icon: 'fa fa-star' },
                        { id: 'item2', text: 'Select Item', icon: 'fa fa-star' }
                    ]
                },
                { id: 2, text: 'View Item', icon: 'fa fa-camera' },
                { id: 4, text: 'Delete Item', icon: 'fa fa-minus' }
            ],
            onSave: function (event) {
                console.log('save', event);
            },
            onReorderRow: function (event) {
                console.log('reorder -->', event);
            },
            onMenuClick: function (event) {
                console.log(event);
            },
            onFocus1: function (event) {
                console.log('focus: ', this.name, event);
                // event.preventDefault();
            },
            onBlur1: function (event) {
                console.log('blur: ', this.name, event);
                // event.preventDefault();
            },
            onEdit(event){},
            postData: {
                "admin": 'somename'
            },
            selectType1: 'cell',
            //autoLoad: false,
            //offset: 99700,
            //multiSelect: false,
            //multiSearch: false,
            //fixedBody: false,
            toolbar: {
                items: [
                    { type: 'button', id: 'w2ui-edit', text: 'custom edit' },
                    { type: 'break', id: 'br1' },
                    { type: 'menu',   id: 'item2', text: 'Drop Down', img: 'icon-folder', items: [
                        { text: 'Item 1', icon: 'icon-page' },
                        { text: 'Item 2', icon: 'icon-page' },
                        { text: 'Item 3', value: 'Item Three', icon: 'icon-page' }
                    ]},
                    { type: 'break', id: 'br2' },
                    { type: 'drop', id: 'drop1', text: 'Drop Button', html: '123' }
                ]
            },

            // possible values: text, alphanumeric, int, float, money, currency, percent, hex, list, combo, enum, select, date, time
            searches: [
                { field: 'personid', label: 'ID', type: 'int' },
                { field: 'color', label: 'Color', type: 'color' },
                { field: 'email', label: 'Email', type: 'text', operator1: 'null', operators1: ['is', 'null', 'not null'] },
                { field: 'fname', label: 'First Name 1', type: 'text' },
                { field: 'fname-full', label: 'First Name 2', type: 'list', options: { items: ['Cuban', 'Rene'] } },
                { field: 'lname', label: 'Last Name', type: 'enum', options: { items: ['Cuban', 'Rene'] }}
            ],
            searchMap: {
                // color: 'personid',
                // 'fname-full': 'fname'
            },
            // sortData: [ { field: 'personid', direction: 'asc' } ],
            columnGroups: [
                { text: '11', text1: function(col) { return (new Date()).getTime() }, span: 3 },
                { text: 'General Information', span: 4 },
                // { text: 'Email', span: 1, master: false },
                // { text: 'Text', span: 1, master: false },
                // { text: 'Important Dates', span: 3 }
            ],
            columns: [
                { field: 'personid', text: 'ID', size: '160px', sortable: true, resizable: true, frozen1: true, tooltip: 'User ID', info: true },
                { field: 'icon', text: 'Icon', size: '60px', searchable: true, sortable: true, resizable: true, style: 'text-align: center',
                    info: {
                        icon      : 'fa fa-flag',
                        style     : '',
                        render    : function (record) {
                            return  '<table>'+
                                    '   <tr><td>Field1</td><td>Value1</td></tr>'+
                                    '   <tr><td>Field2</td><td>Some value</td></tr>'+
                                    '</table>';
                        }
                    },
                },
                { field: 'personid', text: 'ID', size: '50px' },
                { field: 'personid2', text: 'ID2', size: '60px', sortable: true, resizable: true, tooltip: 'Person ID',
                    render: function (record) {
                        if (record.changes && record.changes['personid']) {
                            return record.changes['personid'].text;
                        } else {
                            return record['personid'];
                        }
                    },
                    editable: { type: 'list', items: ['1', '2', '3'], compare: function () { return true } },
                    hidden: true
                },
                { field: 'text', text: 'Random Text', size: '100px', hidden: true, sortable: true, searchable: true, resizable: true },
                { field: 'fname', text: 'First Name', size: '100px', sortable: true,
                    searchable1: true, resizable: true, editable: { type: 'text' },
                    tooltip: 'Full Name', hidden1: true, info: true },
                { field: 'lname', text: 'Last Name', size: '100px', sortable: true, resizable: true,
                    tooltip: 'some tooltip',
                    clipboardCopy: true,
                    info: {
                        icon: 'fa fa-user',
                        showEmpty: true,
                        maxLength: 10,
                        fields: {
                            'text 1' : 'field',
                            'Last Name' : 'lname',
                            'First Name': 'fname',
                            'se': '--',
                            'Custom'    : function (record, ind, col_ind) {
                                console.log('custom', record, ind, col_ind);
                                return record.fname + ' ' + record.lname;
                            }
                        }
                    }
                },
                { field: 'email', text: 'Email', size: '100%', resizable: true, sortable: true, frozen1: true },
                { field: 'snumber', text: 'Number', size: '100px', resizable: true, sortable: true, render: 'size', frozen1: true },
                { field: 'sdate', text: 'Date', size: '120px', render: 'date', searchable1: 'date', sortable: true,
                    editable: { type: 'date' }, hidden: true },
                { field: 'sdate', text: 'Time', size: '120px', render: 'time', searchable1: 'time', sortable: true, hidden: true },
                { field: 'sdate', text: 'Age', size: '120px', render: 'age:ago', sortable: true, hidden: true }
            ],
            ranges1: [
                {
                    name  : 'first',
                    range : [{"recid":'recid-5',"column":1},{"recid":'recid-9',"column":2}],
                    style : "border: 2px dotted green; background-color: rgba(100,400,100,0.2)"
                },
                {
                    name  : 'second',
                    range : [{"recid":'recid-6',"column":4},{"recid":'recid-8',"column":4}],
                    style : "border: 2px dotted orange; background-color: rgba(200,200,200,0.2)"
                }
            ],
            onSelectionExtend: function (event) {
                //console.log(event.newRange[0].column, event.newRange[1].column);
                // restrict one column
                //if (event.newRange[0].column != event.newRange[1].column) event.isCancelled = true; else event.isCancelled = false;
                // restrict one column
                //if (event.newRange[0].recid != event.newRange[1].recid) event.isCancelled = true; else event.isCancelled = false;
                event.onComplete = function () {
                    var range = this.getRange(event.newRange, true);
                    //console.log('done', range);
                }
            },
            onClick(event) {
                var sel = this.getSelection();
                if (sel.length >= 1 && sel[0] == event.recid) {
                    event.preventDefault();
                }
            },
            onSelect: function (event) {
                // console.log('select -->', event);
            },
            onUnselect1: function (event) {
                var sel = this.getSelection();
                if (sel.length > 1 && sel[0] == event.recid) {
                    event.preventDefault();
                }
            },
            onDelete: function (event) {
                //event.force = true;
            },
            onPaste: function (event) {
                var grid = this;
                event.onComplete = function () { grid.save(); }
            },
            onColumnResize: function (event) {
                event.onComplete = function () {
                    console.log('complete', event);
                }
            },
            onCollapse: function (event) {
                console.log('col', event);
            },
            onExpand: function (event) {
                console.log('expand', event);
                return;
                if (w2ui['grid-'+ event.recid]) jQuery().w2destroy('grid-'+ event.recid);
                jQuery('#'+ event.box_id).w2grid({
                    name: 'grid-' + event.recid,
                    fixedBody: false,
                    style: 'width: 100%; height: 150px;',
                    show: {
                        toolbar: false,
                        footer: false,
                        header: false,
                        columnHeaders: false
                    },
                    columnGroups1: [
                        { text: '1', span: 1 },
                        { text: '2', span: 1, master: true }
                    ],
                    columns: [
                        { field: 'recid', text: 'ID', size: '49px', sortable: true, resizable: true, searchable: 'int' },
                        { field: 'lname', text: 'Last Name', size: '30%', sortable: true, resizable: true, searchable: true },
                        { field: 'fname', text: 'First Name', size: '30%', sortable: true, resizable: true, searchable: true },
                    ],
                    records: [
                        { recid: 1, lname: 'Vitali Malinsouski' },
                        { recid: 2, lname: 'John Cook' }
                    ]
                });
            },
            onAdd: function (event) {
                this.add({ recid: 100 });
                this.editField(100, 1)
            },
            summary: [
                //{ recid: 1, lname: 'Vitali Malinsouski', fname: '<span style="float: right">Total:</span>', sdate: '444' }
            ]
            //getFooterHTML: function () { console.log(this); return 'My Own Footer'; }
        });

        // return;

        w2ui.grid.on('change', function(event) {
            console.log('change', event.value_new, event.value_previous, event.value_original);
            //event.preventDefault();
        });
        var fname = ['Vitali', 'Katsia', 'John', 'Peter', 'Sue', 'Olivia', 'Thomas', 'Sergei', 'Snehal', 'Avinash', 'Divia'];
        var lname = ['Peterson', 'Rene', 'Johnson', 'Cuban', 'Twist', 'Sidorov', 'Vasiliev', 'Yadav', 'Vaishnavliasoddfjgj'];
        // add 10k records
        for (var i = 0; i < 5000; i++) {
            var t  = ((new Date()).getTime() - Math.floor(Math.random() * 1000000000));
            var dt = new Date(t);
            if (t < 0) dt = null;
            w2ui['grid'].records.push({
                recid : 'rec-' + i,
                personid: i,
                text: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 2),
                fname: fname[Math.floor(Math.random() * fname.length)],
                lname: lname[Math.floor(Math.random() * lname.length)],
                email: 'vm@gmail.com', manager: '--',
                snumber: Math.floor(Math.random() * 100000) + '',
                sdate: t,
                stime: dt,
                style1: 'background-color: #efefef',
                w2ui: { children: [], colspan1: { personid: 2 } },
            });
        }

        // w2ui.grid.records[0].w2ui = { children: w2ui.grid.records.splice(10, 5), colspan1: { personid: 2 }, hideCheckBox: true };
        // w2ui.grid.records[2].w2ui = { children: w2ui.grid.records.splice(10, 3), colspan1: { personid: 5 }, hideCheckBox: true };
        // w2ui.grid.records[6].w2ui = { children: w2ui.grid.records.splice(10, 10), colspan: { personid: 7 } };
        // w2ui.grid.records[6].w2ui.children[1].w2ui = { children: w2ui.grid.records.splice(10, 4) };
        // w2ui.grid.records[6].w2ui.children[1].w2ui.children[2].w2ui = { children: w2ui.grid.records.splice(10, 4) };
        // w2ui.grid.records[6].w2ui.children[1].w2ui.children[3].w2ui = { children: w2ui.grid.records.splice(10, 4) };
        // w2ui.grid.records[6].w2ui.children[9].w2ui = { children: w2ui.grid.records.splice(10, 4) };

        // w2ui.grid.records[4].w2ui.style = { fname: 'background-color: red' };
        // w2ui.grid.records[10].w2ui.summary = true;
        w2ui.grid.records[0].sdate = null;
        w2ui.grid.records[3].sdate = null;
        w2ui.grid.records[7].sdate = null;
        // w2ui.grid.records[3].stime = '0:01 am';
        // w2ui.grid.records[5].stime = '1:05 am';
        // w2ui.grid.records[50].stime = '0:15 am';

        // w2ui.grid.total = w2ui.grid.records.length;
        w2ui.grid.refresh();
    })
// });

function msg() {
    w2ui.grid.message({
        text: '<input>',
        width: 400,
        actions: ['Save', 'Cancel'],
        focus: 0,
        // hideOn: ['click'],
        // hideOnEsc: true,
        onOpen(evt) {
            console.log('111',evt)
            evt.done(() => {
                console.log('222',evt)
            })
        }
        // focus: 'button:nth-child(2)'
    })
    .close(event => {
        // event.preventDefault()
    //     console.log('close', event)
    //     event.done(() => {
    //         console.log('close-done', event)
    //     })
    })
    .action(event => {
        console.log('action', event)
    })
    .then(event => {
        console.log('then', event)
    })
    .save(event => {
        console.log('save', event.self.text, event);
        event.self.close()
    })
    .cancel(event => {
        event.self.close()
    })
    setTimeout(() => {
        // w2ui.grid.message()
        // w2ui.grid.message()
        w2ui.grid.message({
            text: 'another',
            width: 200,
            height: 120,
            actions: ['final']
        })
        .final((event) => {
            // console.log('ok', event.self.text, event);
            event.self.close()
        })
    }, 500)
}

//]]>
</script>
</head>
<body>
    <input placeholder="before grid" class="w2ui-input" style="margin: 10px 0px;"/>
    <button class="w2ui-btn" onclick="msg()">message</button>
    <div id="grid" style="width: 1024px; height: 568px;"></div>
    <input placeholder="after grid" class="w2ui-input" style="margin: 10px 0px;"/>
    <br/>
    <button class="w2ui-btn" onclick="jQuery().w2destroy('grid');">Destroy</button>
    <button class="w2ui-btn" onclick="w2ui.grid.skip(0);">Skip 0</button>
    <button class="w2ui-btn" onclick="w2ui.grid.skip(10);">Skip 10</button>
    <button class="w2ui-btn" onclick="w2ui.grid.skip(110);">Skip 110</button>
    <button class="w2ui-btn" onclick="w2ui.grid.skip(300);">Skip 300</button>
    <button class="w2ui-btn" onclick="w2ui.grid.skip(375);">Skip 375</button>
    <br/>
    <div id="log" style="padding-top: 10px"></div>
</body>
</html>
